<template>
  <div>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="待办" name="approve">
        <!-- <el-button-group>
          <el-button type="primary" :icon="Refresh" @click="handleQuery">刷新</el-button>
        </el-button-group> -->
        <el-empty v-if="!data.loading && data.resp.total == 0" description="您没有待办任务" />
        <el-row :gutter="12" class="list" v-loading="data.loading" :style="`max-height: ${maxHeight}`">
          <el-col :span="8" v-for="(item, index) in data.resp.list" :key="index">
            <el-card shadow="hover" class="card">
              <template #header>
                <div class="header">
                  <div>{{ item.formInstance.formInstanceName }}</div>
                  <div class="code">
                    {{ item.formInstance.formInstanceCode }}
                  </div>
                </div>
              </template>
              <div class="body">
                <div class="sub">
                  <div class="item">
                    <label class="label">申 请 人</label><div class="text">{{ item.formInstance.applyUserName }}</div>
                  </div>
                  <div class="item">
                    <label class="label">申请部门</label><div class="text">{{ item.formInstance.applyDeptName }}</div>
                  </div>
                  <div class="item">
                    <label class="label">申请时间</label><div class="text">{{ item.formInstance.applyDateTime }}</div>
                  </div>
                  <div class="item">
                    <label class="label">待办任务</label><div class="text">{{ item.taskName }}</div>
                  </div>
                  <div class="item">
                    <label class="label">到达时间</label><div class="text">{{ item.taskStartTime }}</div>
                  </div>
                </div>
              </div>
              <div class="footer">
                <el-button-group class="opera">
                  <el-button type="primary" @click="handleApprove(item)">处理任务</el-button>
                  <el-button plain @click="handleHis(item)">查看流转记录</el-button>
                </el-button-group>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div v-if="data.resp.total > 0" class="page">
          <el-pagination
            v-model:current-page="data.page.pageNum"
            v-model:page-size="data.page.pageSize"
            small
            :page-sizes="[16, 32, 48, 64]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.resp.total"
            @size-change="handleQuery"
            @current-change="handleQuery"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我参与的审批" name="list">
        <List />
      </el-tab-pane>
    </el-tabs>
    <DialogHis
      v-model:visible="state.visibleHis"
      :f-instance-name="state.currentItem?.formInstance?.formInstanceName"
      :p-instance-id="state.currentItem.processInstanceId"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElTabs, ElTabPane, ElCard, ElPagination, ElEmpty } from 'element-plus'
// import { Refresh } from '@element-plus/icons-vue'
import { util } from '@/utils'
import { flowRunApi } from '@/api/modules/flow/flowRun'
import List from './List.vue'
import DialogHis from '../view/His.vue'

const maxHeight = computed(() => `${util.getContentHeight() - 125}px`)

const state = ref({ visibleHis: false, currentItem: {} } as any)

const activeTab = ref('approve')
const data = reactive({
  resp: { list: [] as any[], total: 0 },
  page: { pageNum: 1, pageSize: 16 },

  loading: false
})
const handleQuery = () => {
  data.loading = true
  const page = { ...data.page, sort: {}, filter: {} }
  flowRunApi.findTodoPage(page, { status: 1 }).then(resp => {
    if (resp.success) {
      data.resp = resp.data
    }
    data.loading = false
  })
}
onMounted(handleQuery)

const router = useRouter()
const handleApprove = (item: any) => {
  router.push({
    name: 'flw-inst-approve-form',
    query: { fid: item.formInstance.formInstanceId, tid: item.taskId, tkey: item.taskDefKey }
  })
}
const handleHis = (item: any) => {
  state.value.currentItem = item
  state.value.visibleHis = true
  console.log(state)
}
</script>

<style lang="scss" scoped>
.list {
  overflow-y: auto;
  :deep(.el-card__header) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  :deep(.el-card__body) {
    padding-bottom: 0;
    padding-top: 12px;
  }
  .header {
    font-size: $--size-font-large;
    .code {
      color: $--color-text-secondary;
      font-size: $--size-font-small;
    }
  }
  .sub {
    .item {
      display: flex;
      padding: 2px 0;
      .label {
        min-width: 60px;
        padding-right: 8px;
        &::after {
          content: ':';
        }
      }
      .text {
        color: $--color-text-secondary;
      }
    }
  }
  .footer {
    height: 36px;
    margin: 0 -20px;
    padding-top: 4px;
    .opera {
      display: none;
    }
  }
  .card {
    margin-bottom: 15px;
    &:hover {
      .footer {
        .opera {
          display: flex;
          :deep(.el-button) {
            flex: 1;
            border-bottom: 0;
            &:first-child {
              border-top-left-radius: 0;
              border-left: 0;
            }
            &:last-child {
              border-top-right-radius: 0;
              border-right: 0;
            }
          }
        }
      }
    }
  }
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
